{include file="public/header" title="明亚快报"/}
<header id="header" class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">明亚快报</h1>
</header>

<div class="mui-content" id="article">
    <div id="slider" class="mui-slider">
        <div id="sliderSegmentedControl"
             class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted mui-segmented-control-negative">
            {foreach name="cate" id="value" key="index"}
            {if condition="$index eq 0"}
            <a class="mui-control-item mui-active" href="#item_{$index}">{$value['name']}</a>
            {else/}
            <a class="mui-control-item" href="#item_{$index}">{$value['name']}</a>
            {/if}
            {/foreach}
        </div>
        <!--<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-3"></div>-->
        <div class="mui-slider-group">
            {foreach name="cate" id="value" key="index"}
            {if condition="$index eq 0"}
            <div id="item_{$index}" class="mui-slider-item mui-control-content mui-active" data-cate="{$value['id']}">
                <div class="mui-scroll-wrapper">
                    <div class="mui-scroll">
                        {foreach name="value['child']" id="val"}
                        {if condition="$val['photo'] eq ''"}
                        <div class="mui-card">
                            <div class="mui-card-header">{$val['title']}</div>
                            <div class="mui-card-content">
                                <div class="mui-card-content-inner">
                                    <p class="remarks">{$val['remark']}</p>
                                </div>
                            </div>
                            <div class="mui-card-footer">
                                <p><span class="sun sun-ziyuan"></span>
                                    {:date('Y-m-d',strtotime($val['create_time']))}</p>
                                <a class="mui-card-link" href="{:url('index/article_details',['id'=>$val['id']])}"><span
                                        class="sun sun-add"></span>More</a>
                            </div>
                        </div>
                        {else/}
                        <div class="mui-card">
                            <div class="mui-card-header mui-card-media"
                                 style="height:40vw;background:linear-gradient(180deg ,rgba(0,0,0,.6),rgba(0,0,0,.1)), url(/static/uploads/images/{$val['photo']})">
                                {$val['title']}
                            </div>
                            <div class="mui-card-content">
                                <div class="mui-card-content-inner">
                                    <p></p>
                                    <p class="remarks">{$val['remark']}</p>
                                </div>
                            </div>
                            <div class="mui-card-footer">
                                <p><span class="sun sun-ziyuan"></span>
                                    {:date('Y-m-d',strtotime($val['create_time']))}</p>
                                <a class="mui-card-link" href="{:url('index/article_details',['id'=>$val['id']])}"><span
                                        class="sun sun-add"></span>More</a>
                            </div>
                        </div>
                        {/if}
                        {/foreach}
                        <div style="height: 44px;"></div>
                    </div>
                </div>
            </div>
            {else/}
            <div id="item_{$index}" class="mui-slider-item mui-control-content" data-cate="{$value['id']}">
                <div class="mui-scroll-wrapper">
                    <div class="mui-scroll">
                        <div class="mui-loading">
                            <div class="mui-spinner"></div>
                            请求数据中
                        </div>
                    </div>
                </div>
            </div>
            {/if}
            {/foreach}
        </div>
    </div>
</div>

<script>
    (function ($) {
        $.init({
            swipeBack: true //启用右滑关闭功能
        });
        $('.mui-scroll-wrapper').scroll({
            indicators: false //是否显示滚动条
        });
        document.getElementById('slider').addEventListener('slide', function (e) {
            var $index = e.detail.slideNumber, $node = document.getElementById('item_' + $index);
            // if ($node.querySelector('.mui-loading')) {
            var $cate_id = $node.getAttribute('data-cate');
            $.ajax("{:url('index/article')}", {
                data: {cate_id: $cate_id},
                type: 'post',//HTTP请求类型
                dataType: 'json',//服务器返回json格式数据
                timeout: 10000,//超时时间
                success: function (result) {
                    if (result.code === 200) {
                        document.getElementById('item_' + $index).querySelector('.mui-scroll').innerHTML = result.data;
                    }
                    // 加载中
                    var $loading = '<div class="mui-loading"><div class="mui-spinner"></div>请求数据中</div></div>';
                    // 上一个分类
                    var $prv = $index - 1;
                    if ($prv > -1) {
                        document.getElementById('item_' + $prv).querySelector('.mui-scroll').innerHTML = $loading;
                    }
                    // 下一个分类
                    var $next = $index + 1;
                    if (document.getElementById('item_' + $next) !== null) {
                        document.getElementById('item_' + $next).querySelector('.mui-scroll').innerHTML = $loading;
                    }
                },
                error: function (xhr, type, errorThrown) {
                    //异常处理；
                    switch (type) {
                        case 'error':
                            $.toast('内部服务器错误(' + errorThrown + ')', {duration: 'short', type: 'div'});
                            break;
                        case 'timeout':
                            $.toast('请求超时', {duration: 'short', type: 'div'});
                            break;
                    }
                }
            });
            // }
        });
    })(mui);
</script>
{include file="public/footer"/}